<script setup>
import { ref } from 'vue';
import {getBannerAPI} from '@/apis/music.js'
const banners = ref([]);

const icons = ref([
  { icon: 'calendar', text: '每日推荐' },
  { icon: 'list', text: '歌单' },
  { icon: 'bars', text: '排行榜' },
]);

const playlists = ref([
  { id: 1, cover: 'https://p2.music.126.net/aaa.jpg', name: '夏日清凉歌单', playCount: 12345678 },
  // 更多歌单数据...
]);

const songs = ref([
  { id: 1, name: '歌曲名称1', artist: '歌手1', album: '专辑1' },
  // 更多歌曲数据...
]);

// 过滤器
const formatCount = (value) => {
  if (value > 100000) return `${Math.floor(value / 10000)}万`;
  return value;
};
// 获取轮播图数据
async function getBanner(){
	const res = await getBannerAPI()
	banners.value = res?.banners
	console.log(res)
}
getBanner()
</script>

<template>
	 <scroll-view scroll-y :show-scrollbar="false" class="container">
  <view >
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <uni-icons type="search" size="22" color="#fff"></uni-icons>
      </view>
      <view class="nav-tabs">
        <text class="tab-item active">推荐</text>
        <text class="tab-item">关注</text>
        <text class="tab-item">广场</text>
      </view>
      <view class="nav-right">
        <uni-icons type="chat" size="22" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 内容区域 -->
	
    <scroll-view scroll-y class="content">
      <!-- 轮播图 -->
      <swiper class="banner" :autoplay="true" :interval="3000" >
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item.pic" mode="aspectFill" class="banner-image"/>
        </swiper-item>
      </swiper>

      <!-- 图标入口 -->
      <view class="icons-grid">
        <view class="icon-item" v-for="item in icons" :key="item.text">
          <uni-icons :type="item.icon" size="28" color="#d43c33"></uni-icons>
          <text class="icon-text">{{ item.text }}</text>
        </view>
      </view>

      <!-- 推荐歌单 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">推荐歌单</text>
          <text class="more">更多></text>
        </view>
        <scroll-view scroll-x class="playlist-scroll">
          <view class="playlist-container">
            <view class="playlist-item" v-for="item in playlists" :key="item.id">
              <image :src="item.cover" mode="aspectFill" class="playlist-cover"/>
              <text class="playlist-name">{{ item.name }}</text>
              <view class="play-count">
                <uni-icons type="headphones" size="12" color="#fff"></uni-icons>
                <text class="count-text">{{ item.playCount | formatCount }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 最新音乐 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">最新音乐;</text>
          <text class="more">更多></text>
        </view>
        <view class="song-list">
          <view class="song-item" v-for="(song, index) in songs" :key="song.id">
            <text class="song-index">{{ index + 1 }}</text>
            <view class="song-info">
              <text class="song-name">{{ song.name }}</text>
              <text class="song-artist">{{ song.artist }} - {{ song.album }}</text>
            </view>
            <uni-icons type="more-filled" size="20" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
 </scroll-view>
</template>



<style lang="scss">
	@import '@/styles/reset.scss';
.container {
  height: 100%;
  background-color: #f5f5f5;
}

.nav-bar {
  height: 60px;
  background-color: #d43c33;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  .nav-tabs {
    flex: 1;
    display: flex;
    justify-content: space-around;
    margin: 0 20px;

    .tab-item {
      font-size: 18px;
      &.active {
        font-weight: bold;
      }
    }
  }
}

.banner {
  height: 150px;
  &-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.icons-grid {
  background: #fff;
  padding: 15px 0;
  display: flex;
  justify-content: space-around;

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-text {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
  }
}

.section {
  background: #fff;
  margin-top: 10px;
  padding: 15px;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
    }

    .more {
      font-size: 12px;
      color: #666;
    }
  }
}

.playlist-scroll {
  white-space: nowrap;

  &-container {
    display: inline-flex;
  }

  .playlist-item {
    width: 120px;
    margin-right: 10px;
    display: inline-block;

    &-cover {
      width: 100%;
      height: 120px;
      border-radius: 5px;
      position: relative;
    }

    &-name {
      font-size: 12px;
      color: #333;
    }

    .play-count {
      position: absolute;
      top: 5px;
      right: 5px;
      background: rgba(0,0,0,0.5);
      color: #fff;
      padding: 2px 5px;
      border-radius: 10px;
      display: flex;
      align-items: center;

      .count-text {
        font-size: 10px;
        margin-left: 3px;
      }
    }
  }
}

.song-list {
  .song-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;

    .song-index {
      width: 30px;
      text-align: center;
      color: #999;
    }

    .song-info {
      flex: 1;
      margin-left: 10px;

      .song-name {
        font-size: 14px;
        color: #333;
      }

      .song-artist {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>